// < !--座位表 -->
//         <div class="seat-chart main">
//             <ul class="row1">
//                 <li class="seat1 fa"></li>
//                 <li class="none"></li>
//                 <li class="seat1 fa"></li>
//                 <li class="seat1 fa"></li>
//                 <li class="seat1 fa"></li>
//                 <li class="seat1 fa"></li>
//                 <li class="seat1 fa"></li>
//                 <li class="seat1 fa"></li>
//             </ul>
//             <ul class="row2">
//                 <li class="seat1 fa"></li>
//                 <li class="none"></li>
//                 <li class="seat1 fa"></li>
//                 <li class="seat1 fa"></li>
//                 <li class="seat1 fa"></li>
//                 <li class="seat1 fa"></li>
//                 <li class="seat1 fa"></li>
//                 <li class="seat1 fa"></li>

//             </ul>
//             <ul class="row3">
//                 <li class="seat1 fa"></li>
//                 <li class="none"></li>
//                 <li class="none"></li>
//                 <li class="none"></li>
//                 <li class="none"></li>
//                 <li class="none"></li>
//                 <li class="none"></li>
//                 <li class="none"></li>
//             </ul>
//             <ul class="row4">
//                 <li class="seat1 fa"></li>
//                 <li class="seat1 fa"></li>
//                 <li class="seat1 fa"></li>
//                 <li class="seat1 fa"></li>
//                 <li class="seat1 fa"></li>
//                 <li class="seat1 fa"></li>
//                 <li class="seat1 fa"></li>
//                 <li class="seat1 fa"></li>
//             </ul>
//         </div>

//         <!--查看座位状态 -->
//     <div class="seat-status main">
//         <div class="seat-status-title">
//             <h3>当前座位：</h3>
//         </div>
//         <div class="seat-status-content">
//             <p>座位状态：</p>
//             <p>开始时间：</p>
//             <p>预约人：</p>
//             <p>预约时长：</p>
//         </div>
//     </div>

const seatElements = document.querySelectorAll('.seat1');
let seatStatusInfo = document.querySelector('.seat-status');
// 页面加载时获取座位信息并设置默认值
getSeatStatus();

setInterval(() => {
    getSeatStatus()
}, 2000);

function getSeatStatus() {
    axios.get('/seat/seatinfo', {
        headers: {
            'authorization': localStorage.getItem('token')
        }
    }).then((res) => {
        if (res.data.status === 1) {
            return swal('获取座位信息失败', `${res.data.message}`, 'error');
        } else {
            seatElements.forEach((seat, i) => {
                seat.index = res.data.data[i].id
                if (res.data.data[i].status === 1) {

                    seat.classList.add('fa-user');
                }
                if (res.data.data[i].status === 2) {
                    seat.classList.add('fa-user-times');
                }
            })
        }
    })

    axios.get('/seat/reservation', {
        headers:
            { 'authorization': localStorage.getItem('token') }
    }).then(
        (res) => {
            if (res.data.status === 1) {
                return swal('获取预约信息失败', `${res.data.message}`, 'error');
            }
            else {
                if (res.data.length !== 0) {
                    seatElements.forEach((seat) => {
                        seat.onclick = function () {
                            res.data.data.forEach(item => {
                                if (item.seat_id === seat.index) {
                                    if (item.status === 1) {
                                        //被预约函数
                                        reversationSeat(item, seat);
                                    }
                                    if (item.status === 2) {
                                        //被禁用函数
                                        occupationSeat(item, seat);
                                    }
                                }
                            })
                        }
                    })

                }
            }
        }
    )
}

// 点击座位图事件
seatElements.forEach((seat) => {
    seat.addEventListener('click', (e) => {
        if (e.target.classList.contains('fa-user-times')) {
            return;
        }
        else if (e.target.classList.contains('fa-user')) {
            return;
        }
        else {
            seatElements.forEach((seat) => {
                seat.classList.remove('fa-user-o');
            })
            e.target.classList.add('fa-user-o');
            seatStatusInfo.innerHTML = `<div class="seat-status-title">
        <h3>当前座位：${seat.index}</h3>
      </div>
      <div class="seat-status-content">
        <p>座位状态：随时可以预约</p>
        <p>开始时间:</p>
        <p>预约人：</p>
        <p>预约时长：</p>
      </div>`
        }
    })
}
)


function reversationSeat(item, seat) {
    const reservationDate = new Date(item.reservation_date).toLocaleString();
    seatStatusInfo.innerHTML = `<div class="seat-status-title">
        <h3>当前座位：${seat.index}</h3>
      </div>   
      <div class="seat-status-content">
        <p>座位状态：已预约</p>
        <p>开始时间: ${reservationDate}</p>
        <p>预约人：${item.nickname}</p>
        <p>预约时长：${item.reservation_time} 小时</p>
      </div>`
}

function occupationSeat(item, seat) {
    seatStatusInfo.innerHTML = `<div class="seat-status-title">
        <h3>当前座位：${seat.index}</h3>
      </div>
      <div class="seat-status-content">
        <p>座位状态：已占用</p>
        <p>开始时间: 开始的时候</p>
        <p>预约人：${item.nickname}</p>
        <p>预约时长：${item.reservation_time} 小时</p>
      </div>`
}